<template>
  <div class="mainBox">
      <div class="title">
          <div class="left">
            <span :class="{active:true}">最新Mv</span>
          </div>
          <div class="right">
              <mu-btn :btnName="btnName"></mu-btn>
          </div>
      </div>
      <div class="contentBox">
        
      </div>
  </div>
</template>

<script>
import MuBtn from '../../components/button'
import http from '@/utils/index'
import api from '@/utils/api'

export default {
  data () {
    return {
      btnName: '更多mv',
      showList: []
    }
  },
  components: {
    MuBtn
  },
  created () {
    this.getData(api.recommendMv)
    this.getData(api.recommendStations)
  },
  methods: {
    handleSwipe (item) {
      this.$emit('handleItem', item)
    },
    // 推荐新碟/新歌
    getData (api) {
      var params = {
        // limit: 6
      }
      http.request(api, params, 'GET')
        .then((res) => {
          if (res.code === 200) {
            this.showList = res.data
          }
        })
    }
  }
}
</script>

<style scoped>
.mainBox{
  width: 94%;
  margin:auto;
}
.title{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.title .left{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.title .left .split{
  width: 3rpx;
  height: 25rpx;
  background: rgba(0, 0, 0, 0.5);
  margin:0 15rpx;
}
.title .left .active{
  font-weight: bold;
}

</style>
